<template>
  <div class="wrapper">
    <common-header :title="title"
                   class="header"></common-header>
    <classify-content :list="content"
                      class="content-list"
                      :index="index"
                      @changeColor="handleChangeStyle"></classify-content>

    <classify-nav :list="nav"
                  class="navlist"
                  @changeIndex="handleScroll"
                  :currentIndex="currentIndex"></classify-nav>
  </div>
</template>

<script>
import ClassifyNav from './components/nav'
import ClassifyContent from './components/content'
import CommonHeader from 'common/header/Header'
import CommonScroll from 'common/scroll/Scroll'
export default {
  name: 'Classify',
  components: {
    CommonHeader,
    ClassifyNav,
    ClassifyContent,
    CommonScroll
  },
  data () {
    return {
      list: [],
      index: 0,
      currentIndex: 0,
      content: [],
      nav: []
    }
  },
  computed: {
    title () {
      return this.$route.query.title
    }
  },
  methods: {
    getData () {
      this.$api.classify.classifyAll()
        .then(this.getSuccData)
        .catch((e) => {
          console.log(e)
        })
    },
    getSuccData (res) {
      res = res.data
      if (this.$api.CODE_OK === res.code && res.data) {
        const data = res.data
        this.list = data
        this.normalizeClassify(data)
      }
    },
    normalizeClassify (data) {
      const result = []
      data.map((item) => {
        this.nav.push(item.cate_title)
        result.push({ title: item.cate_title, sub: item.sub || '' })
      })
      result.pop()
      this.nav.pop()
      this.content.push(...result)
    },
    handleScroll (index) {
      this.index = parseInt(index)
      this.currentIndex = parseInt(index)
    },
    handleChangeStyle (index) {
      this.currentIndex = parseInt(index)
    }
  },
  created () {
    this.getData()
  },
  actived () {
    setTimeout(() => {
      this.$refs.nav._initalScroll()
      this.$refs['const-scroll']._initalScroll()
    }, 20)
  },
  destroyed () {
    this.$refs.nav = null
    this.$refs['const-scroll'] = null
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/mixins.styl'
@import '~stylus/variable.styl'

.wrapper
  initPosition()
  background-color $bgHomeTitle
  touch-action none

  .header
    background-color $bgcWh
</style>
